<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>4_getSnapShotBeforeUpdate的使用场景</title>
		<style>
			.list {
				width: 200px;
				height: 150px;
				background-color: skyblue;
				overflow: auto;
			}
			.news {
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div id="test"></div>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

		<script type="text/babel">
			class NewsList extends React.Component {
				/*
                1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
                    1.	constructor()
                    2.	getDerivedStateFromProps 
                    3.	render()
                    4.	componentDidMount() ====> 常用
                        一般在这个钩子中做一些初始化的事，例如：开启定时器，发送网络请求，订阅消息
                2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
                    1.	getDerivedStateFromProps
                    2.	shouldComponentUpdate()
                    3.	render()
                    4.	getSnapshotBeforeUpdate
                    5.	componentDidUpdate()
                3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
                    1.	componentWillUnmount() ====> 常用
                        一般在这个钩子中做一些收尾的事，例如：关闭定时器，取消订阅消息

                */

				state = { newsArr: [] };

				componentDidMount() {
					setInterval(() => {
						//获取原状态
						const { newsArr } = this.state;
						//模拟一条新闻
						const news = "新闻" + (newsArr.length + 1);
						//更新状态
						this.setState({ newsArr: [news, ...newsArr] });
					}, 1000);
				}

				getSnapshotBeforeUpdate() {
					return this.refs.list.scrollHeight;
				}

				componentDidUpdate(preProps, preState, height) {
					this.refs.list.scrollTop += this.refs.list.scrollHeight - height;
				}

				render() {
					return (
						<div className="list" ref="list">
							{this.state.newsArr.map((n, index) => {
								return <div className="news">{n}</div>;
							})}
						</div>
					);
				}
			}
			ReactDOM.render(<NewsList />, document.getElementById("test"));
		</script>
	</body>
</html>
